<!-- 商业险即将到期 -->
<template>
  <a-modal
    :visible="visible"
    @cancel="onClose"
    :title="pageTlt"
    :mask-closable="false"
    :align-center="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    top="30px"
    width="85vw"
    okText="确认"
  >
    <div style="max-height: 85vh">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" :rowKey="`id`" @loadData="loadData">
        <template #carInfo="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text col-lic"> 车牌：{{ record.licenseNo || '-' }} </div>
              <div class="col-text"> 车型：{{ record.modelName || '-' }} </div>
            </div>
          </div>
        </template>
        <template #detailNameList="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text" v-for="item in record.detailNameList" :key="item"> {{ item || '-' }} </div>
            </div>
          </div>
        </template>
      </table-index>
    </div>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
    </template>
    <!-- 续保 -->
    <insure-renewal-modal ref="insureRenewalRef" @ok="loadData" />
  </a-modal>
</template>

<script setup name="carmodal">
  import { ref, reactive, computed } from 'vue'
  import { getInsureList, getInsureExport } from '@/api/workplace.js'
  import { useExport } from '@/hooks/list'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import insureRenewalModal from '../../../../assets/operation/car-insure/components/insure-renewal-modal.vue'
  import useNavigate from '@/hooks/useNavigate'
  import dayjs from 'dayjs'

  const { navigateTo } = useNavigate()
  const insureRenewalRef = ref()
  //查询条件
  let queryParam = reactive({
    insureKind: 1,
  })
  const searchList = computed(() => {
    return [
      {
        label: '车辆当前所属门店',
        prop: 'carSiteId',
        type: 'remote-select',
        attrs: {
          type: 'site_listBystaff',
          popupContainer: '.modal-dialog-wrapper .remote-select-wrapper',
          params: {
            oldId: queryParam.carSiteId,
          },
        },
        change: (val, option) => {
          if (val) {
            queryParam.carId = ''
          }
        },
      },
      {
        label: '车牌号',
        prop: 'carId',
        type: 'remote-select',
        attrs: {
          type: 'car_licenseno_list',
          popupContainer: '.modal-dialog-wrapper .remote-select-wrapper',
          params: {
            carSiteId: queryParam.carSiteId,
          },
        },
      },
      {
        label: '保险单关联门店',
        prop: 'siteId',
        type: 'remote-select',
        attrs: {
          type: 'site_listBystaff',
          popupContainer: '.modal-dialog-wrapper .remote-select-wrapper',
        },
      },
    ]
  })
  // 待处理 - table 配置
  const table = useTable({
    queryParam: queryParam,
    tableHeight: 'calc(100vh - 400px)',
    columns: [
      { title: '系统保单号', dataIndex: 'insureCode', width: 130 },
      { title: '车辆信息', dataIndex: 'carInfo', slotName: 'carInfo', width: 240 },
      { title: '车辆当前所属门店', dataIndex: 'carSiteName', width: 150 },
      { title: '实际保单号', dataIndex: 'insureNo', width: 150 },
      { title: '保险单关联门店', dataIndex: 'siteName', width: 150 },
      { title: '保险公司', dataIndex: 'insureCompanyStr', width: 90 },
      { title: '承保险种', dataIndex: 'detailNameList', slotName: 'detailNameList', width: 150 },
      {
        title: '到期日',
        dataIndex: 'endDate',
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
        width: 110,
      },
      {
        title: '提醒时间',
        dataIndex: 'createTime',
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
        render: (record) => {
          if (record.createTime) {
            return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        width: 170,
      },
    ],
    buttons: [{ mode: 'import', label: '导出', permission: 'svms:asstes:operation:car-insure.export', method: () => handleExport() }],
    operates: [
      {
        type: 'primary',
        icon: 'plus',
        label: '新增保险',
        permission: 'svms:asstes:car:car-model.insure',
        method: (record) => {
          navigateTo('/car-insure/create?carId=' + record.carId)
        },
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getInsureList)
  // modal展示
  const visible = ref(false)
  let pageTlt = ref('')
  const open = (label) => {
    pageTlt = label
    visible.value = true
    loadData(1)
  }
  const onClose = () => {
    visible.value = false
    queryParam.siteId = ''
    queryParam.carSiteId = ''
    queryParam.carId = ''
    queryParam.sortField = ''
    queryParam.sortType = ''
  }

  // 导出事件
  const handleExport = () => {
    useExport(getInsureExport, { ...queryParam, pageSize: 1, pageNumber: 9999 })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .car-msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .car-msg-left {
    margin-right: 10px;
  }
  .col-lic {
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
  }
</style>
